<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import changeLongLat from "@/utils/changeLonLat";
import $ from "jquery";

export default {
  data() {
    return {
      map: null,
      // 天地图token
      tdtToken: "810e2cf8deac0489c6bb8ee29e5d9591",
      // 地图图层控件
      layerControl: null,
    };
  },
  mounted() {
    this.initMap();
    this.initMarkerIcon();
    this.addMarkersLayer();
    this.addBaseMapLayer();
  },
  methods: {
    initMap() {
      // 重庆市经纬度
      const cqp = this.$L.latLng(29.5647398, 106.5478767);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 10);

      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        this.tdtToken;

      const baseMap = this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);

      let baseMaps = {
        基础底图: baseMap,
      };

      // 创建图层控件 并添加basemaps 底图（基础层）
      this.layerControl = this.$L.control.layers(baseMaps).addTo(this.map);
    },
    initMarkerIcon() {
      // 无法自动获取默认图标
      // 自定义图标
      let DefaultIcon = this.$L.icon({
        iconUrl: require("leaflet/dist/images/marker-icon-2x.png"),
        iconRetinaUrl: require("leaflet/dist/images/marker-icon.png"),
        shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
        iconSize: [25, 41], // 图标大小
        iconAnchor: [12, 41], // 图标锚点
        popupAnchor: [1, -34], // 弹出窗口应相对于 iconAnchor 打开的位置
        tooltipAnchor: [16, -28], // 工具提示锚点
        shadowSize: [41, 41], // 阴影大小
      });
      this.$L.Marker.prototype.options.icon = DefaultIcon;
    },
    addMarkersLayer() {
      $.getJSON("../data/json/markerPoints.json", (data) => {
        // 景区
        const attractionsArr = data.attractions;
        attractionsArr.points = changeLongLat.changeLonLat(
          attractionsArr.points
        );
        let attractionsMarkers = [];
        for (let i = 0; i < attractionsArr.points.length; i++) {
          const marker = this.$L
            .marker(attractionsArr.points[i])
            .bindPopup(attractionsArr.text[i]);
          attractionsMarkers.push(marker);
        }
        attractionsMarkers = this.$L.layerGroup(attractionsMarkers);
        this.layerControl.addOverlay(attractionsMarkers, "景区");
        // 公园
        const parksArr = data.parks;
        parksArr.points = changeLongLat.changeLonLat(parksArr.points);
        let parksMarkers = [];
        for (let i = 0; i < parksArr.points.length; i++) {
          const marker = this.$L
            .marker(parksArr.points[i])
            .bindPopup(parksArr.text[i]);
          parksMarkers.push(marker);
        }
        parksMarkers = this.$L.layerGroup(parksMarkers);

        this.layerControl.addOverlay(parksMarkers, "公园");
        // 交通
        const trafficArr = data.traffic;
        trafficArr.points = changeLongLat.changeLonLat(trafficArr.points);
        let trafficMarkers = [];
        for (let i = 0; i < trafficArr.points.length; i++) {
          const marker = this.$L
            .marker(trafficArr.points[i])
            .bindPopup(trafficArr.text[i]);
          trafficMarkers.push(marker);
        }
        trafficMarkers = this.$L.layerGroup(trafficMarkers);

        // null的位置为baseMaps 类似底图 只能存在一个

        // 往 图层管理 中添加
        this.layerControl.addOverlay(trafficMarkers, "交通");
      });
    },
    addBaseMapLayer() {
      const vec = "http://t0.tianditu.gov.cn/vec_w/wmts?tk=" + this.tdtToken;
      let tdtVec = this.$L.tileLayer(vec, {
        maxZoom: 18,
        // 显示瓦片图像的 URL，以代替加载失败的瓦片
        errorTileUrl: "",
        // 如果为 true，则反转瓦片的 Y 轴编号 (为 TMS 服务启用此选项)
        tms: false,
        // 如果 true 并且用户在视网膜显示器上，它将请求四个指定大小一半的瓦片和更大的缩放级别，以使用高分辨率
        detectRetina: true,
      });
      this.layerControl.addBaseLayer(tdtVec, "天地图矢量底图");
    },
  },
  destroyed() {
    this.map.remove();
  },
};
</script>

<style>
</style>